<template>
  <div v-for="(warnLine ,index) in colSet" :key="warnLine.index" class="warn-line">
    <div v-if="warnLine.type === 'line'" class="gapLine"></div>
    <template v-else>
      <div class="index">{{ warnLine.index }}</div>
      <div :class="warnLine.type" class="title">{{ warnLine.title }}</div>
      <div class="content">
        <div v-for="item in warnLine.items" :key="item.key" class="items">
          <div class="name">{{ item.title }}</div>
          <div class="itemType">
            <template v-if="item.type === 'input'">
              <a-input v-model:value="timeData[item.key]" :placeholder="item.placeholder || '请输入'"/>
            </template>
            <div v-if="item.type === 'number'" class="number">
              <!--            <a-input v-model:value="timeData[item.key]" :placeholder="item.placeholder || '请输入'"/>-->
              <a-input-number v-model:value="timeData[item.key]" :min="1" class="numberInput"/>
            </div>
            <template v-if="item.type === 'TimePick'">
              <div class="TimePick">
                <a-time-range-picker v-model:value="timeData[item.key]"
                                     :disabled="item.disabled"
                                     :placeholder="['开始时间','结束时间']"
                                     format="HH:mm:ss"
                                     value-format="HH:mm:ss"
                                     @change="item.change($event,timeData,item)"
                />
              </div>
            </template>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import {ref} from "@vue/reactivity";

const timeData = ref({})
defineProps({
  colSet: {
    type: Array,
    default: []
  },
});
defineExpose({
  timeData
})
</script>

<style scoped lang="less">
@import "./index.less";
</style>
